<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>炫酷的ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
</head>


<body>

{#{{ df }}#}
{#{{ df.columns[0]  }}#}
{#{{ df1 }}#}
{#{{ df2 }}#}


<!-- 定义一个变量来设置宽度 -->
<script type="text/javascript">    var chartWidth = '1500px'; // 你可以根据需要更改这个值
</script>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

{#<div id="main2" style="width: 800px;height:500px;margin: 0 auto;"></div>#}

<div id="main0" style="height:300px;margin: 0 auto;"></div>

<div id="main1" style="height:300px;margin: 0 auto;"></div>
{#上涨比率 main2#}
<div id="main2" style="height:300px;margin: 0 auto;"></div>
{#连板数 main3#}
<div id="main3" style="width: 1500px;height:300px;margin: 0 auto;"></div>
{#最高板 main4#}
<div id="main4" style="width: 1000px;height:300px;margin: 0 auto;"></div>

{#大面数5 #}
<div id="main5" style="width: 1000px;height:300px;margin: 0 auto;"></div>
{#大肉数6#}
<div id="main6" style="width: 1000px;height:300px;margin: 0 auto;"></div>
{#每日交易量7#}
<div id="main7" style="width: 1000px;height:300px;margin: 0 auto;"></div>


<!-- 使用JavaScript动态设置宽度 -->
<script type="text/javascript">    document.getElementById('main0').style.width = chartWidth;
    document.getElementById('main1').style.width = chartWidth;
    document.getElementById('main2').style.width = chartWidth;
    document.getElementById('main3').style.width = chartWidth;
    document.getElementById('main4').style.width = chartWidth;
    document.getElementById('main5').style.width = chartWidth;
    document.getElementById('main6').style.width = chartWidth;
    document.getElementById('main7').style.width = chartWidth;
</script>

{#--------------模块0--最高板名称-----------------#}
<script type="text/javascript">
     {#    日期#}
    var df0 = {{ df0|safe }};
    {#   大肉情绪 #}
    var df1 = {{ df1|safe }};
    {#  #每日交易量（万亿）#}
    var df2 = {{ df2|safe }};
    {#上涨比率#}
    var df3 = {{ df3|safe }};
    {#连板数#}
    var df4 = {{ df4|safe }};
    {#最高板#}
    var df5 = {{ df5|safe }};

    {#大面数#}
    var df6 = {{ df6|safe }};
    {#最高板名称#}
    var df7 = {{ df7|safe }};

    {#console.log('df1' + df1)#}
    console.log('df2' + df2)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main0'));
    // 指定图表的配置项和数据
        var   option = {
                title : {
                    text: '最高板名称-',
                    subtext: ''
                },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['最高板名称-']
               {#data:['最高气温','最低气温']#}
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: false, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: false}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    {#data : ['周一','周二','周三','周四','周五','周六','周日']#}
                    {#data : df0#}
                    data : df7
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        {#formatter: '{value} °C'#}
                        formatter: '{value} '
                    }
                }
            ],
            series : [

                {
                    name:'最高板名称-',
                    type:'line',
                    {#data:[1, -2, 2, 5, 3, 2, 0],#}
                    data:df5,
                    symbolSize: 10, // 设置圆点大小为10
                },

                    {
                          name: 'line',
                          type: 'line',
                          stack: 'all',
                          symbolSize: 6,
                          markLine: {
                            data: [
                                  {
                                "name": "冰点线",
                                "yAxis": 20,
                                "label": {
                                  "formatter": "{b}",
                                  "position": "end"
                                }
                              },
                              ],
                            label: {
                              distance: [40, 8],
                            }
                          }
                }

            ],
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 50, // 两边的按钮大小
                    xAxisIndex: [0],

                    start: 80, // //初始数据显示多少
                    end: 100 //初始数据最多显示多少
                },
                {
                    type: 'inside',
                    xAxisIndex: [0],
                    start: 0,
                    end: 100
                }
            ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

{#--------------模块1--上涨比率 -----------------#}
<script type="text/javascript">
     {#    日期#}
    var df0 = {{ df0|safe }};
    {#   每日涨停数#}
    var df1 = {{ df1|safe }};
    {#  #每日交易量（万亿）#}
    var df2 = {{ df2|safe }};
    {#上涨比率#}
    var df3 = {{ df3|safe }};
    {#连板数#}
    var df4 = {{ df4|safe }};
    {#最高板#}
    var df5 = {{ df5|safe }};

    {#大面数#}
    var df6 = {{ df6|safe }};

    {#console.log('df1' + df1)#}
    console.log('df2' + df2)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main2'));
    // 指定图表的配置项和数据
        var   option = {
                title : {
                    text: '上涨比率-锚点',
                    subtext: '20%以下是冰点-80是沸点--锁定锚点止跌'
                },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['上涨比率']
               {#data:['最高气温','最低气温']#}
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: false, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: false}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    {#data : ['周一','周二','周三','周四','周五','周六','周日']#}
                    data : df0
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        {#formatter: '{value} °C'#}
                        formatter: '{value} '
                    }
                }
            ],
            series : [

                {
                    name:'上涨比率',
                    type:'line',
                    {#data:[1, -2, 2, 5, 3, 2, 0],#}
                    data:df3,
                    symbolSize: 10, // 设置圆点大小为10
                },

                    {
                          name: 'line',
                          type: 'line',
                          stack: 'all',
                          symbolSize: 6,
                          markLine: {
                            data: [
                                  {
                                "name": "冰点线",
                                "yAxis": 20,
                                "label": {
                                  "formatter": "{b}",
                                  "position": "end"
                                }
                              },
                              ],
                            label: {
                              distance: [40, 8],
                            }
                          }
                }

            ],
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 50, // 两边的按钮大小
                    xAxisIndex: [0],

                    start: 80, // //初始数据显示多少
                    end: 100 //初始数据最多显示多少
                },
                {
                    type: 'inside',
                    xAxisIndex: [0],
                    start: 0,
                    end: 100
                }
            ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>


{#--------------模块2--连板数 -----------------#}
<script type="text/javascript">
     {#    日期#}
    var df0 = {{ df0|safe }};
    {#   每日涨停数#}
    var df1 = {{ df1|safe }};
    {#  #每日交易量（万亿）#}
    var df2 = {{ df2|safe }};
    {#上涨比率#}
    var df3 = {{ df3|safe }};
    {#连板数#}
    var df4 = {{ df4|safe }};
    {#最高板#}
    var df5 = {{ df5|safe }};

    {#大面数#}
    var df6 = {{ df6|safe }};

    {#console.log('df1' + df1)#}
    console.log('df2' + df2)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main3'));
    // 指定图表的配置项和数据
        var   option = {
                title : {
                    text: '连板数',
                    subtext: '10以下是冰点'
                },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['连板数']
               {#data:['最高气温','最低气温']#}
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: false, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: false}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    {#data : ['周一','周二','周三','周四','周五','周六','周日']#}
                    data : df0
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        {#formatter: '{value} °C'#}
                        formatter: '{value} '
                    }
                }
            ],
            series : [

                {
                    name:'连板数',
                    type:'line',
                    {#data:[1, -2, 2, 5, 3, 2, 0],#}
                    data:df4,
                    symbolSize: 10, // 设置圆点大小为10
                    itemStyle : { normal: {label : {show: true}}}
                },

                    {
                          name: 'line',
                          type: 'line',
                          stack: 'all',
                          symbolSize: 6,
                          markLine: {
                            data: [
                                  {
                                "name": "冰点线",
                                "yAxis": 10,
                                "label": {
                                  "formatter": "{b}",
                                  "position": "end"
                                }
                              },
                              ],
                            label: {
                              distance: [40, 8],
                            }
                          }
                }

            ],
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 50, // 两边的按钮大小
                    xAxisIndex: [0],

                    start: 80, // //初始数据显示多少
                    end: 100 //初始数据最多显示多少
                },
                {
                    type: 'inside',
                    xAxisIndex: [0],
                    start: 0,
                    end: 100
                }
            ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>


{#--------------模块3- 最高板------------------#}
<script type="text/javascript">
     {#    日期#}
    var df0 = {{ df0|safe }};


    {#最高板#}
    var df5 = {{ df5|safe }};



        {#压力高度#}
    var df8 = {{ df8|safe }};

        var dateNum=400

    df0 = df0.slice(-dateNum);
    df5= df5.slice(-dateNum);
    df8 = df8.slice(-dateNum);

    {#console.log('df1' + df1)#}
    console.log('df2' + df2)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main1'));
    // 指定图表的配置项和数据
        var   option = {
                title : {
                    text: '最高板',
                    subtext: '上涨空间'
                },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['最高板']
               {#data:['最高气温','最低气温']#}
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: false, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: false}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    {#data : ['周一','周二','周三','周四','周五','周六','周日']#}
                    data : df0
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        {#formatter: '{value} °C'#}
                        formatter: '{value} '
                    }
                }
            ],
            series : [

                {
                    name:'压力高度',
                    type:'line',
                    {#data:[1, -2, 2, 5, 3, 2, 0],#}
                    data:df8,
                    symbolSize: 10, // 设置圆点大小为10
                    lineStyle: {color: '#FF0000'}, // 纯红色的十六进制表示方式
                    itemStyle : { normal: {label : {show: true}}}

                },
                                {
                    name:'最高连板',
                    type:'line',
                    {#data:[1, -2, 2, 5, 3, 2, 0],#}
                    data:df5,
                    lineStyle: {
                        color: 'blue',
                        type: 'dashed'
                    },// 设置线的颜色为蓝色，虚线
                    symbolSize: 10, // 设置圆点大小为10
                    itemStyle : { normal: {label : {show: false}}}

                },

                    {
                          name: 'line',
                          type: 'line',
                          stack: 'all',
                          symbolSize: 6

                }

            ],
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 50, // 两边的按钮大小
                    xAxisIndex: [0],

                    start: 80, // //初始数据显示多少
                    end: 100 //初始数据最多显示多少
                },
                {
                    type: 'inside',
                    xAxisIndex: [0],
                    start: 0,
                    end: 100
                }
            ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>



{#--------------模块4- 大面数------------------#}
<script type="text/javascript">
     {#    日期#}
    var df0 = {{ df0|safe }};
    {#   每日涨停数#}
    var df1 = {{ df1|safe }};
    {#  #每日交易量（万亿）#}
    var df2 = {{ df2|safe }};
    {#上涨比率#}
    var df3 = {{ df3|safe }};
    {#连板数#}
    var df4 = {{ df4|safe }};
    {#最高板#}
    var df5 = {{ df5|safe }};

    {#大面数#}
    var df6 = {{ df6|safe }};

    {#console.log('df1' + df1)#}
    console.log('df2' + df2)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main5'));
    // 指定图表的配置项和数据
        var   option = {
                title : {
                    text: '大面数',
                    subtext: ' '
                },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['大面数']
               {#data:['最高气温','最低气温']#}
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: false, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: false}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    {#data : ['周一','周二','周三','周四','周五','周六','周日']#}
                    data : df0
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        {#formatter: '{value} °C'#}
                        formatter: '{value} '
                    }
                }
            ],
            series : [

                {
                    name:'大面数',
                    type:'line',
                    {#data:[1, -2, 2, 5, 3, 2, 0],#}
                    data:df6,
                    symbolSize: 10, // 设置圆点大小为10
                },

                    {
                          name: 'line',
                          type: 'line',
                          stack: 'all',
                          symbolSize: 6

                }

            ],
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 50, // 两边的按钮大小
                    xAxisIndex: [0],

                    start: 80, // //初始数据显示多少
                    end: 100 //初始数据最多显示多少
                },
                {
                    type: 'inside',
                    xAxisIndex: [0],
                    start: 0,
                    end: 100
                }
            ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>



{#--------------模块5- 大肉数------------------#}
<script type="text/javascript">
     {#    日期#}
    var df0 = {{ df0|safe }};
    {#   大肉情绪#}
    var df1 = {{ df1|safe }};
    {#  #每日交易量（万亿）#}
    var df2 = {{ df2|safe }};
    {#上涨比率#}
    var df3 = {{ df3|safe }};
    {#连板数#}
    var df4 = {{ df4|safe }};
    {#最高板#}
    var df5 = {{ df5|safe }};

    {#大面数#}
    var df6 = {{ df6|safe }};


    {#console.log('df1' + df1)#}
    console.log('df2' + df2)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main6'));
    // 指定图表的配置项和数据
        var   option = {
                title : {
                    text: '大肉数',
                    subtext: ' '
                },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['大肉数']
               {#data:['最高气温','最低气温']#}
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: false, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: false}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    {#data : ['周一','周二','周三','周四','周五','周六','周日']#}
                    data : df0
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        {#formatter: '{value} °C'#}
                        formatter: '{value} '
                    }
                }
            ],
            series : [

                {
                    name:'大肉数',
                    type:'line',
                    {#data:[1, -2, 2, 5, 3, 2, 0],#}
                    data:df1,
                    symbolSize: 10, // 设置圆点大小为10
                },

                    {
                          name: 'line',
                          type: 'line',
                          stack: 'all',
                          symbolSize: 6

                }

            ],
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 50, // 两边的按钮大小
                    xAxisIndex: [0],

                    start: 80, // //初始数据显示多少
                    end: 100 //初始数据最多显示多少
                },
                {
                    type: 'inside',
                    xAxisIndex: [0],
                    start: 0,
                    end: 100
                }
            ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>


{#--------------模块6- 每日交易量（万亿）------------------#}
<script type="text/javascript">
     {#    日期#}
    var df0 = {{ df0|safe }};
    {#   每日涨停数#}
    var df1 = {{ df1|safe }};
    {#  #每日交易量（万亿）#}
    var df2 = {{ df2|safe }};
    {#上涨比率#}
    var df3 = {{ df3|safe }};
    {#连板数#}
    var df4 = {{ df4|safe }};
    {#最高板#}
    var df5 = {{ df5|safe }};

    {#大面数#}
    var df6 = {{ df6|safe }};


    {#console.log('df1' + df1)#}
    console.log('df2' + df2)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main7'));
    // 指定图表的配置项和数据
option = {
                    title : {
                    text: '每日交易量',
                    subtext: ' '
                },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: df0,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '每日交易量',
      type: 'bar',
      barWidth: '20%',
        itemStyle : { normal: {label : {show: true}}},
      data: df2
    }
  ],
    dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 50, // 两边的按钮大小
                    xAxisIndex: [0],

                    start: 80, // //初始数据显示多少
                    end: 100 //初始数据最多显示多少
                },
                {
                    type: 'inside',
                    xAxisIndex: [0],
                    start: 0,
                    end: 100
                }
            ]
};
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>


</body>
</html>



